<template>
  <div class="RightsManagement">
    <div class="left">
      <div class="left-head">
        <span>角色目录</span>
        <el-button class="but-remove" type="text" size="medium" @click="removeRole">
          <i class="remove-icon"></i>删除
        </el-button>
        <el-button class="but-add" type="text" size="medium" @click="addRole">
          <i class="add-icon"></i>新增
        </el-button>
      </div>
      <el-tree
        :data="roles"
        node-key="id"
        default-expand-all
        :render-content="renderContent"
        @current-change="roleTreeClick"
        highlight-current
      ></el-tree>
    </div>
    <div class="right">
      <div class="right-operation">
        <el-form ref="form" label-width="60px">
          <el-form-item label="名称:">
            <el-input class="yd-input" v-model="searchName" maxlength="15"></el-input>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="queryClick">
            <i class="query-icon"></i>查询
          </el-button>
          <el-button
            class="but-save"
            type="text"
            size="medium"
            @click="saveClick"
            :disabled="saveBtnDisabled"
            :loading="saveLoading"
          >
            <i class="save-icon"></i>保存
          </el-button>
        </el-form>
      </div>
      <div class="content-list">
        <el-table
          ref="permissionsTreeTable"
          :data="showTreeTableData"
          height="100%"
          row-key="id"
          border
          :row-class-name="setTableRowHidden"
          :row-style="showRow"
        >
          <el-table-column prop="displayName" label="名称">
            <template slot-scope="scope">
              <span v-for="space in scope.row._level" class="ms-tree-space" :key="space"></span>
              <span
                class="tree-ctrl"
                v-if="scope.row && scope.row.type === 0"
                @click="toggleExpanded(scope.row)"
              >
                <i v-if="!scope.row._expanded" class="reduce-icon"></i>
                <i v-else class="expand-icon"></i>
                <i class="folder-icon"></i>
              </span>
              <span v-else class="tree-ctrl">
                <i class="file-icon"></i>
              </span>
              {{scope.row.displayName}}
            </template>
          </el-table-column>
          <el-table-column prop="routeAddress" label="地址"></el-table-column>
          <el-table-column prop="updateTime" label="更新日期"></el-table-column>
          <el-table-column align="center" width="50" :render-header="renderHeader">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.checkStatus"
                :indeterminate="childCheckStatus(scope.row)"
                @change="checkBoxClick(scope.row)"
              ></el-checkbox>
            </template>
          </el-table-column>
        </el-table>
        <!-- <tree-table
          :columns="columns"
          :data="treeTableData"
          bSelection
          border
          stripe
          node-key="name"
          size="mini"
          class="el-table-redefine"
          style="width: 70%;"
          height="100%"
        ></tree-table>-->
      </div>
    </div>
    <el-dialog
      class="role-management-dialog"
      title="提示"
      :visible.sync="deleteRoleDialogVisible"
      width="20%"
      left
    >
      <div class="dialog-body">
        <div class="body-title">确认删除该角色吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="removeRoleConfirm()">确 定</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog
      class="role-management-dialog"
      title="提示"
      :visible.sync="addRoleDialogVisible"
      width="25%"
      left
    >
      <div class="dialog-body">
        <span slot="footer" class="dialog-footer">
          <el-form>
            <el-form-item label="名称：">
              <el-input placeholder="请输入名称" class="add-dialog-input" v-model="rolesName" maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="标识符：">
              <el-input placeholder="请输入标识符" class="add-dialog-input" v-model="rolesMark" maxlength="15"></el-input>
            </el-form-item>
          </el-form>
          <el-button @click="addRoleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRoleConfirm()">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import treeTable from "./components/treeTable";
import {
  rolesList,
  addRole,
  deleteRole,
  putRolePermissions,
  permissionsTree,
  rolePermissions,
  postOperationLogs
} from "@/api/apiManagement";

export default {
  // components: { treeTable },
  data() {
    return {
      robot_id: null,
      selection: null,
      roles: [],

      //
      columns: [
        {
          text: "名称",
          value: "displayName"
        },
        {
          text: "地址",
          value: "routeAddress"
        },
        {
          text: "更新日期",
          value: "updateTime"
        }
      ],
      allCheckStatus: false,
      allBoxIndeterminate: false,
      treeTableData: [],
      showTreeTableData: [],
      deleteRoleDialogVisible: false,
      addRoleDialogVisible: false,
      selectRole: {},
      selectRolePermissions: [],
      checkPermissions: [],
      rolesName: "",
      rolesMark: "",
      searchName: "",
      saveLoading: false,
      permissionsTreeCheckList: [],
      saveBtnDisabled: true,
      isQueryStatus: true
    };
  },
  computed: {
    expandRowKeys: function() {
      let recursive = data => {
        let array = [];
        for (var i = 0, len = data.length; i < len; i++) {
          if (data[i].children) {
            array.push(data[i].id);
            array.concat(recursive(data[i].children));
          }
        }
        return array;
      };
      if (this.showTreeTableData) {
        return recursive(this.showTreeTableData)
          ? recursive(this.showTreeTableData)
          : [];
      }
    }
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    //
    this.getRolesList();
    this.getPermissionsTree();
  },
  mounted() {},
  methods: {
    getRolesList() {
      rolesList()
        .then(response => {
          if (response) {
            this.roles = response.list;
          }
        })
        .catch(() => {});
    },
    getPermissionsTree() {
      permissionsTree()
        .then(response => {
          if (response) {
            let rev = data => {
              if (data.type === 0) {
                data["_expanded"] = true;
                if (data.children) {
                  data.children.forEach(item => {
                    item["_level"] = data._level + 2;
                    item["isShow"] = true;
                    item["parent"] = data;
                    item["checkStatus"] = false;
                    rev(item);
                  });
                }
              }
              if (data.children) {
                data.childNode = data.children;
                delete data.children;
              }
            };
            response.forEach(item => {
              item["_level"] = 0;
              item["isShow"] = true;
              item["checkStatus"] = false;
              rev(item);
            });
            this.treeTableData = response.slice(0);
            this.showTreeTableData = this.treeDataToArrayData(
              response.slice(0)
            );
          }
        })
        .catch(() => {});
    },
    getRolePermissions() {
      let parm = {
        roleId: this.selectRole.id,
        displayName: this.searchName,
        size: 0
      };
      rolePermissions(parm)
        .then(response => {
          if (response) {
            this.selectRolePermissions = response.list;
            this.initTreeCheckStatus();

            let rev = (node, rolesPer) => {
              if (node.childNode && node.childNode.length > 0) {
                node.childNode.forEach(item => {
                  if (item.type === 0) {
                    rev(item, rolesPer);
                  } else {
                    if (
                      rolesPer.type === item.type &&
                      rolesPer.id === item.id
                    ) {
                      item.checkStatus = true;
                    }
                  }
                });
              }
            };
            response.list.forEach(checkItem => {
              this.showTreeTableData.forEach(item => {
                if (item.type === 0) {
                  rev(item, checkItem);
                } else {
                  if (
                    checkItem.type === item.type &&
                    checkItem.id === item.id
                  ) {
                    item.checkStatus = true;
                  }
                }
              });
            });

            this.setChildNodeSelectedStatus();
            this.saveBtnDisabled = true;
            this.setSelectedAllStatus();
          }
        })
        .catch(() => {});
    },
    // 设置父节点选择
    setChildNodeSelectedStatus() {
      let rev = data => {
        if (data.type === 0) {
          let selectedNum = 0;
          if (data.childNode) {
            data.childNode.forEach(item => {
              if (item.type === 0) {
                selectedNum = selectedNum + (rev(item) === true ? 1 : 0);
              } else {
                if (item.checkStatus === true) {
                  selectedNum++;
                }
              }
            });
            if (selectedNum === data.childNode.length) {
              data.checkStatus = true;
              return true;
            }
            return false;
          }
          return data.checkStatus;
        }
      };
      this.showTreeTableData.forEach(item => {
        if (item.type === 0) {
          item.checkStatus = rev(item);
        }
      });
    },
    // 把所有节点都初始化未选中
    initTreeCheckStatus() {
      let rev = item => {
        item.checkStatus = false;
        if (item.type === 0) {
          if (item.childNode) {
            item.childNode.forEach(item => {
              rev(item);
            });
          }
        }
      };
      this.showTreeTableData.forEach(item => {
        rev(item);
      });
    },
    // treeTableCheck(data, target) {
    //   for (const index in data) {
    //     if (data[index].type === 0) {
    //       this.treeTableCheck(data[index].children, target);
    //     } else {
    //       if (data[index].id === target.id) {
    //         this.$refs.permissionsTreeTable.toggleRowSelection(
    //           data[index],
    //           true
    //         );
    //         break;
    //       }
    //     }
    //   }
    // },
    // 树状结构抽离成数组
    // look me 这里只是把树状里面的子节点浅copy了一份到数组中。所以他俩的内存地址应该一样。所以在其他方法里面使用的时候可能出现混用的问题。
    treeDataToArrayData(treeData) {
      let rev = data => {
        let arrayData = [];
        arrayData.push(data);
        if (data.childNode && data.childNode.length > 0) {
          data.childNode.forEach(item => {
            if (item.type === 0) {
              arrayData = arrayData.concat(rev(item));
            } else {
              arrayData.push(item);
            }
          });
        }
        return arrayData;
      };
      let finalArr = [];
      if (treeData.length > 0) {
        treeData.forEach(item => {
          finalArr = finalArr.concat(rev(item));
        });
      } else {
        finalArr = rev(treeData);
      }
      return finalArr;
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <i class="file" />
          <span style="margin-left:5px;">{data.displayName}</span>
        </span>
      );
    },
    hiddenCheck(row) {
      if (row.columnIndex === 3 && row.row.type === 0) {
        return "hidden-check";
      }
    },
    renderHeader(h, { column, $index }) {
      return (
        <el-checkbox
          value={this.allCheckStatus}
          indeterminate={this.allBoxIndeterminate}
          on-change={data => this.selectAllClick(data)}
        />
      );
    },
    // 节点选中绑定一个方法
    childCheckStatus(row) {
      if (row.type === 0) {
        let isExistNumber = 0;
        if (row.childNode) {
          row.childNode.forEach(item => {
            if (item.checkStatus === true) {
              isExistNumber++;
            }
          });
          if (isExistNumber > 0) {
            if (isExistNumber === row.childNode.length) {
              return false;
            } else {
              return true;
            }
          }
        }
      }
      return false;
    },
    roleTreeClick(obj) {
      if (obj) {
        this.selectRole = obj;
      } else {
        this.selectRole = {};
      }
      this.getRolePermissions();
    },
    removeRole() {
      if (this.selectRole && this.selectRole.id) {
        this.deleteRoleDialogVisible = true;
      } else {
        this.$message("请选择角色");
      }
    },
    removeRoleConfirm() {
      deleteRole({}, this.selectRole.id)
        .then(response => {
          this.setOperationLogs(
            "删除-" + this.selectRole.displayName + "-角色"
          );
          this.$message({
            message: "删除角色成功",
            type: "success"
          });
          this.deleteRoleDialogVisible = false;
          this.getRolesList();
        })
        .catch(() => {});
    },
    addRole() {
      this.addRoleDialogVisible = true;
    },
    addRoleConfirm() {
      if (!this.rolesName || this.rolesMark.length <= 0) {
        this.$message.error("请输入角色名称");
        return;
      }
      if (!this.rolesMark || this.rolesMark.length <= 0) {
        this.$message.error("请输入角色标识符");
        return;
      }
      let parm = {
        displayName: this.rolesName,
        name: this.rolesMark
      };
      addRole(parm)
        .then(response => {
          this.setOperationLogs("新增-角色-" + this.rolesName + "");
          this.$message({
            message: "添加角色成功",
            type: "success"
          });
          this.addRoleDialogVisible = false;
          this.getRolesList();
        })
        .catch(() => {});
    },
    queryClick() {
      if (this.searchName && this.searchName.length > 0) {
        this.isQueryStatus = true;
        this.setNodeHidden();
        this.filterMethod();
      } else {
        this.isQueryStatus = false;
        let rev = node => {
          node.isShow = true;
          if (node.type === 0) {
            if (node.childNode) {
              node.childNode.forEach(item => {
                if (item.type === 0) {
                  rev(item);
                } else {
                  item.isShow = true;
                }
              });
            }
          }
        };
        this.showTreeTableData.forEach(item => {
          rev(item);
        });
      }
    },
    filterMethod() {
      let rev = node => {
        if (node.type === 0) {
          if (node.displayName.search(this.searchName) != -1) {
            this.setNodeShow(node);
          } else {
            if (node.childNode) {
              node.childNode.forEach(item => {
                rev(item);
              });
            }
          }
        } else {
          if (node.displayName.search(this.searchName) != -1) {
            node.isShow = true;
          }
        }
      };

      if (this.showTreeTableData instanceof Array) {
        this.showTreeTableData.forEach(item => {
          if (item.type === 0) {
            rev(item);
          }
        });
      } else {
        rev(data);
      }
    },
    setNodeHidden() {
      let rev = node => {
        node.isShow = false;
        if (node.type === 0) {
          if (node.childNode) {
            node.childNode.forEach(item => {
              rev(item);
            });
          }
        }
      };
      if (this.showTreeTableData instanceof Array) {
        this.showTreeTableData.forEach(item => {
          rev(item);
        });
      } else {
        rev(this.showTreeTableData);
      }
    },
    setNodeShow(data) {
      let rev = node => {
        node.isShow = true;
        if (node.type === 0) {
          if (node.childNode) {
            node.childNode.forEach(item => {
              rev(item);
            });
          }
        } else {
          node.isShow = true;
        }
      };
      rev(data);
    },
    saveClick() {
      this.saveLoading = true;
      let rev = node => {
        let checkArr = [];
        if (node.type === 0) {
          if (node.childNode) {
            node.childNode.forEach(item => {
              if (item.type === 0) {
                checkArr = checkArr.concat(rev(item));
              } else {
                if (item.checkStatus === true) {
                  checkArr.push(item);
                }
              }
            });
          }
        } else {
          if (node.checkStatus === true) {
            checkArr.push(node);
          }
        }
        return checkArr;
      };
      let temp = [];
      this.showTreeTableData.forEach(item => {
        if (item.type === 1 && item.checkStatus === true) {
          temp.push(item);
        }
      });
      let permissionIds = [];
      temp.forEach(item => {
        permissionIds.push(item.id);
      });
      putRolePermissions(
        { permissionIds: permissionIds.join(",") },
        this.selectRole.id
      )
        .then(response => {
          this.setOperationLogs(
            "配置-" + this.selectRole.displayName + "-权限"
          );
          this.saveLoading = false;
          this.$message({
            message: "修改权限成功",
            type: "success"
          });
          this.getRolePermissions();
        })
        .catch(() => {
          this.saveLoading = false;
        });
    },
    showRow: function(row) {
      const show = row.row.parent
        ? row.row.parent._expanded && row.row.parent._show
        : true;
      row.row._show = show;
      return show
        ? "animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;"
        : "display:none;";
    },
    // 切换下级是否展开
    toggleExpanded: function(row) {
      row._expanded = !row._expanded;
    },
    setTableRowHidden(row, rowIndex) {
      if (row.row.isShow === false) {
        return "table-row-hidden";
      }
    },
    selectAllClick(status) {
      if (this.selectRole && this.selectRole.id) {
        let rev = data => {
          data.checkStatus = status;
          if (data.type === 0) {
            if (data.childNode) {
              data.childNode.forEach(item => {
                item.checkStatus = status;
              });
            }
          }
        };
        this.showTreeTableData.forEach(item => {
          rev(item);
        });
        this.allCheckStatus = status;
        this.allBoxIndeterminate = false;
        this.setSaveButtonDisable();
      } else {
        this.$refs.permissionsTreeTable.clearSelection();
        this.$message("请选择角色");
      }
    },
    checkBoxClick(row) {
      if (this.selectRole && this.selectRole.id) {
        let rev = node => {
          if (node.type === 0) {
            if (node.childNode) {
              node.childNode.forEach(item => {
                if (item.type === 0) {
                  rev(item);
                } else {
                  item.checkStatus = row.checkStatus;
                }
              });
            }
          }
        };
        rev(row);
        this.setChildNodeSelectedStatus();
        this.setSelectedAllStatus();
        this.setSaveButtonDisable();
      } else {
        row.checkStatus = false;
        this.$refs.permissionsTreeTable.clearSelection();
        this.$message("请选择角色");
      }
    },
    // 设置保存按钮是否可以点击
    setSaveButtonDisable() {
      let getAllSelectedLeaf = data => {
        let allSlectedLeaf = [];
        if (data && data.length > 0) {
          data.forEach(item => {
            if (item.type === 0) {
              allSlectedLeaf = allSlectedLeaf.concat(getAllSelectedLeaf(item));
            } else {
              if (item.checkStatus === true) {
                allSlectedLeaf.push(item);
              }
            }
          });
        }
        return allSlectedLeaf;
      };
      let allSlectedLeaf = getAllSelectedLeaf(this.showTreeTableData);
      if (allSlectedLeaf.length === this.selectRolePermissions.length) {
        let equalNumber = 0;
        allSlectedLeaf.forEach(item => {
          this.selectRolePermissions.forEach(rolePer => {
            if (item.id === rolePer.id && item.type === rolePer.type) {
              equalNumber++;
            }
          });
        });
        if (
          equalNumber != allSlectedLeaf.length ||
          equalNumber != this.selectRolePermissions.length
        ) {
          this.saveBtnDisabled = false;
        } else {
          this.saveBtnDisabled = true;
        }
      } else {
        this.saveBtnDisabled = false;
      }
    },
    // 因为父节点上面的选中状态不可靠所以，只判自己点上面的状态
    setSelectedAllStatus() {
      let allLeaf = 0;
      let allCheckLeaf = 0;
      this.showTreeTableData.forEach(item => {
        allLeaf = allLeaf + this.getSingleNodeAllLeaf(item);
        allCheckLeaf = allCheckLeaf + this.getSingleNodeAllCheckLeaf(item);
      });
      this.allCheckStatus = allLeaf === allCheckLeaf;
      this.allBoxIndeterminate =
        allCheckLeaf > 0 && allLeaf != allCheckLeaf ? true : false;
    },
    // 获取某个节点下所有的leaf(最后一级的节点)
    getSingleNodeAllLeaf(data) {
      let leaf = 0;
      if (data.type === 0) {
        if (data.childNode) {
          data.childNode.forEach(item => {
            if (item.type === 0) {
              leaf = leaf;
            } else {
              leaf = leaf + 1;
            }
          });
        }
      } else {
        leaf = leaf + 1;
      }
      return leaf;
    },
    // 获取某个节点下选中的最后一级的节点
    getSingleNodeAllCheckLeaf(data) {
      let checkLeaf = 0;
      if (data.type === 0) {
        if (data.childNode) {
          data.childNode.forEach(item => {
            if (item.type === 0) {
              checkLeaf = checkLeaf;
            } else {
              if (item.checkStatus === true) {
                checkLeaf = checkLeaf + 1;
              }
            }
          });
        }
      } else {
        if (data.checkStatus === true) {
          checkLeaf = checkLeaf + 1;
        }
      }
      return checkLeaf;
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>

<style>
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.RightsManagement {
  width: 100%;
  height: 100%;
  /* min-width: 1430px;
  min-height: 1000px; */
}
.RightsManagement .left {
  width: 300px;
  height: 100%;
  /* background-color: #eeeeee; */
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
}
.RightsManagement .right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 300px);
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid rgb(202, 231, 238);
  /* overflow: auto; */
  float: right;
}
.RightsManagement .left-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.RightsManagement .left-head .but-add,
.RightsManagement .left-head .but-remove {
  height: 27px;
  margin-left: 10px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: right;
}
.RightsManagement .left-head .add-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/add.png);
  background-size: 100% 100%;
  float: left;
}
.RightsManagement .left-head .remove-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/remove.png);
  background-size: 100% 100%;
  float: left;
}
.RightsManagement .right-operation {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.RightsManagement .left .custom-tree-node span {
  font-size: 13px;
}
.RightsManagement .file {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(255, 0, 0); */
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
  float: left;
}

.RightsManagement .right-operation .el-form-item {
  /* width: 300px; */
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}
.RightsManagement .right-operation .el-form-item__label {
  line-height: 26px;
  float: left;
}
.RightsManagement .right-operation .el-date-editor.el-input {
  width: 200px;
}
.RightsManagement .right-operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.RightsManagement .right-operation .yd-input {
  width: 260px;
  height: 27px;
  /* float: left; */
}
.RightsManagement .right-operation .yd-input .el-input__inner {
  height: 27px;
  line-height: 25px;
  padding: 0 6px;
  border: 1px solid rgb(202, 231, 238);
}
.RightsManagement .right-operation .but-query,
.RightsManagement .right-operation .but-save {
  height: 27px;
  margin-left: 20px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.RightsManagement .right-operation .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.RightsManagement .right-operation .save-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/save.png);
  background-size: 100% 100%;
  float: left;
}
.RightsManagement .but-save:disabled {
  color: #aaa;
}

.RightsManagement .content-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #ebeef5;
}

.RightsManagement .el-dialog {
  background-color: rgb(215, 239, 236);
  padding-bottom: 5px;
}
.RightsManagement .role-management-dialog .el-dialog__header {
  padding: 0px 5px;
}
.RightsManagement .role-management-dialog .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.RightsManagement .role-management-dialog .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.RightsManagement .role-management-dialog .el-dialog__body {
  border: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
}
.RightsManagement .role-management-dialog .dialog-body .body-title {
  margin: 20px 10px;
}
.RightsManagement .role-management-dialog .dialog-footer {
  display: block;
  text-align: center;
  margin: 15px 0px;
}
.RightsManagement .role-management-dialog .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}
.RightsManagement .role-management-dialog .el-form {
  margin-left: 30px;
}
.RightsManagement .role-management-dialog .el-form-item label {
  width: 65px;
  padding: 0px;
}
.RightsManagement .role-management-dialog .el-form-item__content {
  text-align: left;
}
.RightsManagement .role-management-dialog .add-dialog-input {
  width: 210px;
  height: 27px;
}
.RightsManagement .role-management-dialog .add-dialog-input .el-input__inner {
  height: 26px;
  line-height: 24px;
  border: 1px solid rgb(202, 231, 238);
}
.RightsManagement .folder-icon {
  position: relative;
  top: 2px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 16px;
  height: 14px;
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
}
.RightsManagement .file-icon {
  position: relative;
  top: 2px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 16px;
  height: 14px;
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
}
.RightsManagement .hidden-check .cell {
  display: none;
}

.RightsManagement .ms-tree-space {
  position: relative;
  top: 1px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 16px;
  height: 14px;
}
.RightsManagement .tree-ctrl {
  position: relative;
  cursor: pointer;
  color: #2196f3;
  vertical-align: middle;
}
.RightsManagement .expand-icon {
  position: relative;
  top: 2px;
  display: inline-block;
  line-height: 1;
  width: 16px;
  height: 14px;
  background-image: url(../../../static/resources/images/expand.png);
  background-size: 100% 100%;
}
.RightsManagement .reduce-icon {
  position: relative;
  top: 2px;
  display: inline-block;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  width: 16px;
  height: 14px;
  background-image: url(../../../static/resources/images/reduce.png);
  background-size: 100% 100%;
}
.RightsManagement .table-row-hidden {
  display: none;
}
</style>